<template>
	<div>
		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
			<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options">
				<template #toolbar_buttons>
					<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'dbBackup/add'" :loading="loading"> 新增 </el-button>
				</template>
				<template #toolbar_tools> </template>

				<template #row_createTime="{ row }">
					<el-tooltip :content="row.createTime" placement="top">
						<span>{{ formatPast(row.createTime) }}</span>
					</el-tooltip>
				</template>
				<template #row_size="{ row }">
					<span>{{ (row.size / 1024 / 1024).toFixed(2) }} MB</span>
				</template>
				<template #row_buttons="{ row }">
					<el-tooltip content="删除" placement="top">
						<el-button icon="ele-Delete" text type="danger" v-auth="'dbBackup/delete'" @click="handleDelete(row)"> </el-button>
					</el-tooltip>
				</template>
			</vxe-grid>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VxeGridInstance } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { formatPast } from '/@/utils/formatTime';

import { getAPI } from '/@/utils/axios-utils';
import { SysDbBackupApi } from '/@/api-services/api';

const xGrid = ref<VxeGridInstance>();
const loading = ref(false);
// 表格参数配置
const options = useVxeTable(
	{
		id: 'dbBackup',
		name: '备份信息',
		columns: [
			// { type: 'checkbox', width: 40, fixed: 'left' },
			{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
			{ field: 'fileName', title: '文件名称', minWidth: 200, showOverflow: 'tooltip' },
			{ field: 'size', title: '文件大小', width: 150, showOverflow: 'tooltip', slots: { default: 'row_size' } },
			{ field: 'createTime', title: '备份时间', width: 200, showOverflow: 'tooltip', slots: { default: 'row_createTime' } },
			{ title: '操作', fixed: 'right', width: 150, showOverflow: true, slots: { default: 'row_buttons' } },
		],
	},
	{
		// 代理配置
		proxyConfig: { autoLoad: true, ajax: { query: () => handleQueryApi() } },
		// 分页配置
		pagerConfig: { enabled: false },
		// 工具栏配置
		toolbarConfig: { enabled: false },
	}
);

// 查询api
const handleQueryApi = async () => {
	return await getAPI(SysDbBackupApi).apiSysDbBackupListGet();
};

// 增加备份
const handleAdd = async () => {
	loading.value = true;
	await getAPI(SysDbBackupApi).apiSysDbBackupAddPost();
	loading.value = false;
	await xGrid.value?.commitProxy('reload');
};

// 删除备份
const handleDelete = async (row: any) => {
	loading.value = true;
	await getAPI(SysDbBackupApi).apiSysDbBackupDeletePost(row.fileName);
	loading.value = false;
	await xGrid.value?.commitProxy('reload');
};
</script>

<style scoped></style>
